const HelloWorld = {
  // props: ['show', 'first', 'data-second'],
  props: ["show"],
  inheritAttrs: false,
  template: `
  <div v-show="show">
    <div>
      <p>这是一个Model框</p>
      <input type="text" v-model="value">
      <button @click="closeModel">关闭model</button>
    </div>
  </div>`,
  data() {
    return {
      value: "3",
    };
  },
  created() {
    console.log(this.$attrs);
    console.log(this.$props);
  },
  methods: {
    closeModel() {
      this.$emit("update:show", false);
    },
  },
};

const App = {
  template: `
  <div class="hello">
    <button @click="iSshow=!iSshow">打开model</button>
    <h1 v-show="iSshow"> ddd </h1>
    <HelloWorld :show.sync="iSshow" :first="firstMsg" :data-second="secondMsg"></HelloWorld>
  </div>`,
  data() {
    return {
      iSshow: false,
      firstMsg: "first props",
      secondMsg: "secondMsg",
    };
  },
  components: {
    HelloWorld,
  },
};
const vm = new Vue({
  el: document.querySelector("#root"),
  render: (h) => h(App),
});
